<template>
  <view class="contenter" :style="{ 'height': setHeight + 'px' }">
    <view class="nav-style" :style="{'height':navHeight+'px','padding-top':statusBarHeight+'px'}" ></view>
    <view class="content">
      <view class="u-flex flex_bt">
        <view>
          <view class="name">请选择登录角色</view>
          <view class="p">请从下方选择您的角色类型，享受专属功能。</view>
        </view>

        <u-image :src="`/static/logo.png`"  :height="131" :width="131" :fade="false"></u-image>
      </view>
      <view class="main">
        <view class="list u-flex flex_j_c" v-for="(data,index) in tabList" :key="index"  @click="tabChangeIndex(index)" :class="{'active':index == tabIndex}">
          <view class="img">
            <u-image :src="`/static/login/${data.img}.png`"  :height="102" :width="105" :fade="false"></u-image>
          </view>
          <view class="u-flex">
            <view class="userName">{{data.name}}</view>
            <u-icon name="arrow-rightward"  :color="index == tabIndex?'#45806E':'#4b4b4b'" size="40" ></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "identity",
  data(){
    return{
      tabList:[
        {name:'氧发堂技师',img:'technician',},
        {name:'氧发堂店长',img:'store',},
        {name:'氧发堂老板',img:'boss',},
        {name:'区域经理',img:'boss',},
      ],
      navHeight: '', //整体顶部导航栏的高度
      statusBarHeight:'',//状态栏高度
      tabIndex:0,
    }
  },
  created(){


  },
  methods:{
    tabChangeIndex(index){
      this.tabIndex = index
      uni.setStorage({
        key: 'type',
        data: index+1,
        success: function () {
          console.log('现在类型 1技师，2店长，3老板，4区域代理',index+1);
        }
      });
        this.$u.route({
          url: '/pages/login/login',
          params:{
            type:index+1 // 1技师，2店长，3老板，4区域代理
          }
        })

    },
  },
  onLoad(){
//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
    let {statusBarHeight,system} = uni.getSystemInfoSync()
    this.statusBarHeight = statusBarHeight
    this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
  },
}
</script>

<style scoped lang="scss">
  .contenter{
    background: white!important;
  }
  .content{
    padding: 0 32rpx;
    .name{
      font-size: 44rpx;
      font-weight: 800;
      margin-bottom: 22rpx;
    }
    .p{
      color: $uni-text-color-grey;
      font-size: 24rpx;
    }
    .main{
      margin-top: 108rpx;
      .active{
        background: rgba(69, 128, 110, 0.26)!important;
        border: 4rpx solid $uni-color-primary !important;
        box-shadow: 0px 0px 12rpx $uni-color-primary;
        .userName{
          color: $uni-color-primary !important;
        }
      }
      .list{
        margin-bottom: 24rpx;
        width: 100%;
        height: 160rpx;
        background: #FFFFFF;
        border: 4rpx solid #F4F4F4;
        box-shadow: 0px 0px 12rpx #F4F4F4;
        border-radius: 12rpx;
        position: relative;
        .userName{
          font-size: 40rpx;
          font-weight: bold;
          color: $uni-text-color;
          margin-right: 48rpx;
          margin-left: 104rpx;
        }
        .img{
          position: absolute;
          left: 50rpx;
          top: 54rpx;
        }
      }
    }
  }

</style>